<template>
  <div class="avatar">
    <el-avatar
      shape="circle"
      :size="30"
      src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    ></el-avatar>
    <div class="avatar-status avatar-lose"></div>
  </div>
</template>

<script></script>

<style scoped="scoped">
/* 用户头像 */
.avatar {
  width: 40px;
  min-width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 用户状态 */
.avatar-status {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #42b983;
  right: 5px;
  bottom: 5px;
}

/* 用户下线状态 */
.avatar-lose {
  background-color: #8c939d;
}
</style>
